<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>广告位管理</title>
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
<style>
	.layui-table-cell{
		height:60px;
		line-height:60px;
	}
</style>
</head>
<body>
	<div class="wrap">
		<blockquote class="layui-elem-quote news_search">
			<div class="layui-inline">
				<label class="layui-form-label"
					style="margin-bottom: 0; width: 105px">关键词：</label>
				<div class="layui-input-inline">
					<input id="commodity_keyword_input" value="" placeholder="请输入关键字" 
						class="layui-input search_input" type="text">
				</div>
				<a class="layui-btn search_btn" onclick="commodityObj.query()">查询</a>
			</div>
		</blockquote>
		<!--  商品列表表格 -->
		<table class="layui-table" lay-filter="commodity_table" id="commodity_table" style="margin: 0"></table>
	</div>
	<script src="../../publicjs/jquery-1.8.0.min.js"></script>
	<script src="../../publicjs/smallkingutil.js"></script>
	<script src="../../lib/layui/layui.js"></script>
	<script>
	layui.use('table', function() {
			 var table = layui.table;
			 window.billboardId = commonUtil.getRequestParam("billboardId");
			 // 加载商品数据表格
			 window.commodityTable = table.render({
				id:'commodityTable',			
				elem:'#commodity_table',
				url:commonUtil.domain() +'/admin/mall/commodity/list', // 数据接口
				method:'post',
				page:true, //开启分页
				where : {
					billboardId : billboardId,
					forBind : true
				},
				request:{
					pageName: 'pageNum', // 分页当前页数发给后台的参数名
					limitName: 'pageSize' // 分页每页多少条发给后台的参数名
				},
				cols : [ [ //表头
				{
					field : 'commodityName',
					title : '商品名称',
					width : 350
				},{
					field : 'oper',
					title : '操作',
					width : 100,
					templet: '#oper'
				}]]
			});

			// 监听表格点击删除修改和查看图片列表按钮
			table.on('tool(commodity_table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				  var data = obj.data; // 获得当前行数据
				  var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				  var tr = obj.tr; // 获得当前行 tr 的DOM对象
				  var ajaxParam = {
						  
				  }
				  if(layEvent === 'bind'){
					 // 绑定商品到广告位
					 ajaxParam.url = commonUtil.domain() +'/admin/mall/billboard/bind', 
					 ajaxParam.data = {
						 commodityId : data.commodityId,
						 billboardId : billboardId
				     }
				  }else if(layEvent === 'unbind'){ // 点击表格一行的移除按钮
					 // 解绑广告位和商品的关联
					 ajaxParam.url = commonUtil.domain() +'/admin/mall/billboard/unbind', 
					 ajaxParam.data = {
						 commodityId : data.commodityId,
						 billboardId : billboardId
				     }
				  }
				  ajaxUtil.post(ajaxParam, function(){
					 // 刷新表格
					 var param = {
						 billboardId : billboardId	 
					 }
					 commodityTable.refresh(param);
				  });
			});
			// 刷新表格
			commodityTable.refresh = function(data){
				commodityTable.reload({
					  where: data,
					  page: {
					    curr: 1 //重新从第 1 页开始
					  }
				});
			}
	});
	window.commodityObj = {
		query : function(){
			var keyword = $('#commodity_keyword_input').val();
			var data = {
					keyword : keyword,
					forBind : "true",
					billboardId : billboardId
				}
			commodityTable.refresh(data);
		}
	}
	</script>
	<script type="text/javascript">
		$(function(){
				commonUtil.setMaxLength(40);
			})
	</script>
	<script type="text/html" id="oper">
		{{#  if(d.billboardId == ""){ }}
			<a class="layui-btn layui-btn-xs" lay-event="bind">绑定</a>
  		{{#  } else { }}
			<a class="layui-btn layui-btn-xs" lay-event="unbind">解绑</a>
  		{{#  } }}
	</script>
</body>
</html>